import { createNamespace } from '@utils/index'

const [bem] = createNamespace('header');

import './index.scss'

const tools = [
    {
      title: '导入JSON',
      icon: 'el-icon-upload2',
      onClick: () => {
        // useModal({
        //   title: '导入JSON',
        //   props: {
        //     width: 642
        //   },
        //   content: () => (
        //     <>
        //       <ElRadioGroup v-model={state.coverRadio}>
        //         <ElRadio label={'current'}>覆盖当前页面</ElRadio>
        //         <ElRadio label={'all'}>覆盖整个项目</ElRadio>
        //       </ElRadioGroup>
        //       <MonacoEditor
        //         onChange={importJsonChange}
        //         code={JSON.stringify(jsonData)}
        //         layout={{ width: 600, height: 600 }}
        //       />
        //     </>
        //   ),
        //   onConfirm: () => {
        //     const isCoverCurrent = state.coverRadio == 'current'
        //     // 覆盖当前页面
        //     if (isCoverCurrent) {
        //       updatePage({
        //         oldPath: currentPage.value.path,
        //         page: JSON.parse(state.importJsonValue)
        //       })
        //     } else {
        //       // 覆盖整个项目
        //       overrideProject(JSON.parse(state.importJsonValue))
        //     }
        //     ElMessage({
        //       showClose: true,
        //       type: 'success',
        //       duration: 2000,
        //       message: isCoverCurrent ? '成功覆盖当前页面' : '成功覆盖整个项目'
        //     })
        //   }
        // })
      }
    },
    {
      title: '导出JSON',
      icon: 'el-icon-download',
      onClick: () => {
        // const { copy } = useClipboard({ source: JSON.stringify(jsonData) })

        // copy()
        //   .then(() => ElMessage.success('复制成功'))
        //   .catch((err) => ElMessage.error(`复制失败：${err}`))
      }
    },
    {
      title: '真机预览',
      icon: 'el-icon-mobile-phone',
      onClick: () => {
        // const qrcode = useQRCode(location.origin + '/preview')
        // useModal({
        //   title: '预览二维码（暂不可用）',
        //   props: {
        //     width: 300
        //   },
        //   footer: null,
        //   content: () => (
        //     <div class={'flex justify-center'}>
        //       <img width={220} height={220} src={qrcode.value} />
        //     </div>
        //   )
        // })
      }
    },
    {
      title: '复制页面',
      icon: 'el-icon-document-copy',
      onClick: () => {
        // ElMessage({
        //   showClose: true,
        //   type: 'info',
        //   duration: 2000,
        //   message: '敬请期待！'
        // })
      }
    },
    {
      title: '撤销',
      icon: 'el-icon-refresh-left',
      onClick: () => {
        // ElMessage({
        //   showClose: true,
        //   type: 'info',
        //   duration: 2000,
        //   message: '敬请期待！'
        // })
      }
    },
    {
      title: '重做',
      icon: 'el-icon-refresh-right',
      onClick: () => {
        // ElMessage({
        //   showClose: true,
        //   type: 'info',
        //   duration: 2000,
        //   message: '敬请期待！'
        // })
      }
    },
    {
      title: '清空页面',
      icon: 'el-icon-delete',
      onClick: () => {
        // ElMessage({
        //   showClose: true,
        //   type: 'info',
        //   duration: 2000,
        //   message: '敬请期待！'
        // })
      }
    },
    {
      title: '预览',
      icon: 'el-icon-position',
      onClick: () => {
        // localStorage.setItem(localKey, JSON.stringify(jsonData))
        // window.open(location.href.replace('/#/', '/preview/#/'))
      }
    },
    // {
    //   title: '反馈',
    //   icon: 'el-icon-chat-line-square',
    //   onClick: () => {
        
    //   }
    // }
  ]
export default {
    name: 'Header',
    data() {
        return {

        }
    },
    render() {
        
        return (
            <el-row type="flex" class={bem()}>
                {/* 左侧 */}
                <el-col span={6} class="flex items-center">
                  
                </el-col>
                {/* 中间 */}
                <el-col class="tool-list" span={12}>
                {
                    tools.map(item=> {
                        return (
                            <div class="tool-item" onClick={item.onClick}>
                                <i class={item.icon}></i>
                                <div class="title">{ item.title }</div>
                            </div>
                        )
                    })
                }
                </el-col>
                {/* 右侧 */}
                <el-col span={6} class="right-tools flex flex-row-reverse items-center">
                </el-col>
            </el-row>
        )
    }
}